<template>
  <!-- 头部 -->
  <header class="mine-header">
    <div class="lf">
      <!-- logo -->
      <div class="logo">
        <img src="../../assets/logo.png" alt="图片" width="40px" height="40px" mode="contain" title="AI数字人" />

      </div>
      <el-button @click="useBack" :icon="ArrowLeftBold" size="small" round>返回</el-button>
      <!-- 菜单 -->
      <!-- <ul class="menu-list" @click.stop>
        <li class="menu-item" :class="{ active: item.state }" v-for="item in menuList" :key="item.value" @click="onMenuItem(item)">
          {{ item.label }}(
          <span class="line">{{ item.shortcut }}</span>
          )
          <ul class="dropdown-list" v-if="item.children?.length" @click.stop>
            <li class="dropdown-item" v-for="it in item.children" :key="it.value" @click="onMenuChildItem(it)">
              <span>{{ it.label }}</span>
              <span>{{ it.shortcut }}</span>
            </li>
          </ul>
        </li>
      </ul> -->
    </div>
    <div class="center">AI超级主播</div>
    <!-- 设置大小 -->
    <ul class="resize-list" @click.stop>
      <li class="item" v-for="item in resizeList" :key="item.value" @click="item.action && item.action()">
        <el-icon v-if="item.value == 'minimize'">
          <SemiSelect />
        </el-icon>
        <el-icon v-if="item.value == 'quit'">
          <CloseBold />
        </el-icon>
      </li>
    </ul>
    <!-- 下拉框 -->
    <!-- <ul class="dropdown-list" :style="{ top: dropdownConfig.y, left: dropdownConfig.x }" v-if="dropdownConfig.visible" @click.stop>
      <li class="dropdown-item" :class="{ disabled: item.disabled }" v-for="item in dropdownList" :key="item.value" @click="onDropdownItem(item)">
        <span>{{ item.label }}</span>
        <span>{{ item.shortcut }}</span>
      </li>
    </ul> -->
  </header>
</template>

<script setup>
import { useResize, useElementIcon } from './hooks.js'
import { useRouter } from "vue-router";
import { CloseBold, SemiSelect } from '@element-plus/icons-vue'

const router = useRouter();
const useBack = () => {
  router.back()
};

const { resizeList } = useResize()
const { ArrowLeftBold } = useElementIcon()
</script>

<style lang="less" scoped>
@import './index.less';
</style>